<template>
  <div class="container">
    <!-- 第一行start -->
    <el-dialog title="题目预览" :visible.sync="showDialog" @close="showVideo = false">
      <el-row type="flex" justify="space-around">
        <el-col>【题型】:&nbsp;{{ rowData.questionType }}</el-col>
        <el-col>【编号】:&nbsp;{{ rowData.id }}</el-col>
        <el-col>【难度】:&nbsp;{{ rowData.difficulty }}</el-col>
        <el-col>【标签】:&nbsp;{{ rowData.tags }}</el-col>
      </el-row>
      <!-- 第一行end -->
      <!-- 第二行start -->
      <el-row
        type="flex"
        justify="space-around"
        style="margin-top: 20px; margin-bottom: 20px"
      >
        <el-col>【学科】:&nbsp;{{ rowData.subject }}</el-col>
        <el-col>【目录】:&nbsp;{{ rowData.catalog }}</el-col>
        <el-col>【方向】:&nbsp;{{ rowData.direction }}</el-col>
        <el-col></el-col>
      </el-row>
      <!-- 第二行end -->
      <hr />
      <!-- 第三行start -->
      <el-row>
        <el-col>
          【题干】:
          <template>
            <div style="color: #3737ff" v-html="rowData.question"></div>
          </template>
        </el-col>
        <el-col>
          <!-- 单选题start -->
          <el-row v-if="rowData.questionType === '单选题'">
            <el-col
              >{{
                rowData.questionType
              }}
              选项:&nbsp;&nbsp;&nbsp;&nbsp;(以下选中的选项为正确答案)</el-col
            >
            <el-col>
              <el-radio-group :value="radio">
                <el-radio
                  style="display: block; margin-top: 15px"
                  v-for="obj in questions"
                  :key="obj.id"
                  v-model="radio"
                  :label="obj.isRight === 1"
                  >{{ obj.code }}:{{ obj.title }}</el-radio
                >
              </el-radio-group>
              <!-- 第三行end -->
            </el-col>
          </el-row>
          <!-- 单选题end -->
          <!-- 多选题start -->
          <el-row v-if="rowData.questionType === '多选题'">
            <el-col
              >{{
                rowData.questionType
              }}
              选项:&nbsp;&nbsp;&nbsp;&nbsp;(以下选中的选项为正确答案)</el-col
            >
            <el-col>
                  <el-checkbox-group :value="checkbox">
                  <el-checkbox
                  style="display: block; margin-top: 15px"
                  v-for="obj in questions"
                  :key="obj.id"
                  :label="obj.isRight"
                  >
                  {{ obj.code }}:{{ obj.title }}
                  </el-checkbox>
              </el-checkbox-group>
              <!-- 第三行end -->
            </el-col>
          </el-row>
          <!-- 多选题end -->
          <hr />
          <!-- 第四行start -->
          <el-row>
            <el-col>
              【参考答案】: &nbsp;&nbsp;
              <el-button @click="showVideo = true" type="danger" size="small">视频答案预览</el-button>
            </el-col>
            <el-col v-if="showVideo">
              <video style="width:400px;height:300px" autoplay controls :src="articleInfo.videoURL"></video>
            </el-col>
          </el-row>
          <!-- 第四行end -->
          <hr />
          <!-- 第五行start -->
          <el-row type="flex" justify="start" align="middle">
            <el-col :span="4">【答案解析】: </el-col>
            <el-col>
              <span v-html="articleInfo.answer"></span>
            </el-col>
          </el-row>
          <!-- 第五行end -->
          <hr/>
          <!-- 第六行start -->
          <el-row type="flex" justify="start" align="middle">
            <el-col :span="4">【题目备注】:</el-col>
            <el-col>{{ articleInfo.remarks }}</el-col>
          </el-row>
          <!-- 第六行end -->
        </el-col>
      </el-row>
      <!-- 关闭按钮start -->
      <el-row type="flex" justify="end">
        <el-col :span="2">
          <el-button type="primary" @click="closeFn">关闭</el-button>
        </el-col>
      </el-row>
      <!-- 关闭按钮end -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 题目预览框是否展示
      showDialog: false,
      // 定义要接收的所点击行的数据
      rowData: {},
      // 定义试题答案列表
      questions: [],
      // 定义答案默认选中项
      radio: true,
      // 定义获取到的详细信息
      articleInfo: {},
      // 定义video组件显示
      showVideo: false,
      checkbox: [1]
    }
  },
  created () {
  },
  methods: {
    // 点击关闭按钮  关闭弹窗和删除页面的video组件
    closeFn () {
      this.showDialog = false
      this.showVideo = false
    }
  }
}
</script>

<style scoped lang='less'></style>
